<template>
  <div class="user-info">
    <el-input
      type="text"
      v-model="name"
      placeholder="请输入用户名"
      clearable
      size="large"
      @blur="isValidName"
    />
    <el-input
      v-model="pwd"
      type="password"
      placeholder="请输入密码"
      show-password
      size="large"
      @blur="isValidPwd"
    />
  </div>
  <div class="user-xieyi">
    <el-checkbox v-model="isAgree" size="large" checked />
    已阅读并同意小米账号 <a href="javascript:;">用户协议</a> 和
    <a href="javascript:;">隐私政策</a>
  </div>
  <p class="isAgree"></p>
  <div class="btn-login">
    <el-button type="primary" @click="toMain">登录</el-button>
  </div>
  <div class="noPwd-phoneLogin">
    <a href="javascript:;">忘记密码？</a>
    <a href="javascript:;">手机登录</a>
  </div>
</template>

<script>
import { ref, reactive, toRefs, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElNotification } from "element-plus";
export default {
  name: "LoginVue",
  setup() {
    const isAgree = ref(false);
    const store = useStore();
    const user = reactive({
      name: "",
      pwd: "",
    });
    const router = useRouter();
    const { proxy } = getCurrentInstance();

    // 登录成功路由到主页
   function toMain() {
      //账号密码不能为空
      if (!user.name.trim() && !user.pwd.trim())
        proxy.$message.error("请输入账号和密码");
      //判断协议是否勾选
      else if (isAgree.value) {
        //本地用户
        if (user.pwd === localStorage.getItem(user.name)) {
          router.push({ name: "home" });
          store.commit("user/changeMenu", user.name);
        } else {
          //后台用户
          proxy.$http
            .post("http://localhost:8080/user", {
              name: user.name,
              pwd: user.pwd,
            })
            .then(({ data: res }) => {
              if (res.code === 20000) {
                router.push({ name: "home" });
                store.commit("user/changeMenu", res.data.name);
              } else {
                proxy.$message.error("账号不存在");
              }
            });
        }
      } else {
        const isAgree = document.querySelector(".isAgree");
        isAgree.innerHTML = "请勾选用户协议";
      }
    }
    //验证用户名
    function isValidName() {
      !user.name.trim() &&
        ElNotification({
          title: "warning",
          message: "请输入账号",
          type: "warning",
          duration: 2000,
        });
    }
    //验证密码
    function isValidPwd() {
      !user.pwd.trim() &&
        ElNotification({
          title: "warning",
          message: "请输入密码",
          type: "warning",
          duration: 2000,
        });
    }
    return {
      ...toRefs(user),
      isAgree,
      toMain,
      isValidName,
      isValidPwd,
    };
  },
};
</script>

<style lang="less" scoped>
.user-info {
  margin-top: 33px;
  .el-input {
    display: block;
    &:nth-of-type(2) {
      margin-top: 20px;
    }
    :deep(.el-input__inner) {
      width: 288px;
      height: 60px;
    }
  }
}

.isAgree {
  font-size: 12px;
  color: red;
}
.user-xieyi {
  position: relative;
  margin-top: 20px;
  font-size: 14px;
  text-indent: 2em;
  color: #aaa;
  a {
    color: black;
  }
  .el-checkbox {
    position: absolute;
    top: -10px;
    left: 0;
  }
}
.btn-login {
  .el-button {
    margin: 20px 16px 10px;
    width: 288px;
    height: 60px;
    font-size: 18px;
  }
}
.noPwd-phoneLogin {
  display: flex;
  justify-content: space-between;
  a {
    color: #409eff;
    &:last-child {
      margin-right: 40px;
    }
  }
}
</style>